<template>
  <view>
    
    <!-- 搜索 -->
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" cancelButton="none" :maxlength="500"></uni-search-bar>
    </view>
    
    
    
    <view class="keyword-list" v-if="kw!=''">
      <view class="keyword-content" v-for="(item,index) in kwList" :key="index" @click="tocateDetail(item,0)">
        <view class="con-item">{{item.goods_name}}</view>
        <uni-icons type="right"></uni-icons>
      </view>
    </view>
    
    <view v-else>
      <!-- 搜索历史 -->
      <view class="history-title">
        搜索历史
        <uni-icons type="trash" size="20" @click="deleHis"></uni-icons>
      </view>
      
      <view class="bb">
        <view class="history-content" v-for="(item,index) in historys" :key="index">
        <uni-tag :inverted="true" :text="item" @click="tocateDetail(item,1)"/>
        </view>
      </view>
    </view>
    
    
    
  </view>
</template>


<script>
  // import {hightLight} from '@/js/keyword'
  export default {
    data() {
      return {
        timer:null,//时间
        kw:"",//存储关键词
        kwList:[],//存储关键词的数据
        hisList:[],//存储历史记录
      };
    },
    onLoad() {
      this.hisList = JSON.parse(uni.getStorageSync('kw') || '[]')//解析JSON字符串
    },
    methods:{
      input(e){//文本框输入事件
        //防抖处理
        clearTimeout(this.timer)//到点就清除
        
        this.timer = setTimeout(()=>{
          this.kw = e;
          this.getKeyWord()                    
        },500)
      },
      async getKeyWord(){//获取关键字数据
        if(this.kw==""){
           this.kwList = [];
        }else{
          const {data:res} = await uni.$http.get("/api/public/v1/goods/qsearch",{query:this.kw})
          // if(res.meta.status!=200) return uni.showMsg()          
          this.kwList = res.message;
          // res.message.forEach((ca)=>{
          //   console.log(ca.goods_name)            
          //   hightLight(this.kw,ca.goods_name)
          // })
        }
      },
      tocateDetail(item,num){//跳转商品列表
        this.saveHistory()//保存历史
        if(num==0){
          uni.navigateTo({
            url:"/subpkg/goods-list/goods-list?query="+item.goods_id
          })
        }else{
          uni.navigateTo({
            url:"/subpkg/goods-list/goods-list?query="+item
          })
        }
        
        console.log(item.goods_id)
      },
      saveHistory(){//保存历史记录
        this.hisList.push(this.kw)//将关键词存到历史记录中
        //去重处理
        const set = new Set(this.hisList)//数组转set对象
        set.delete(this.kw)//删除
        set.add(this.kw)//增加
        this.hisList = Array.from(set)//set对象转数组
        
        // 永久性存储记录
        uni.setStorageSync('kw', JSON.stringify(this.hisList))//将javastrip对象转为json字符串
      },
      deleHis(){//删除所有历史记录
        this.hisList = uni.removeStorageSync("kw")//移除历史
        this.hisList = []
      },
    },
    computed: {//计算属性进行反转
        historys() {
          return [...this.hisList].reverse() //排序处理，最新数据排第一位
        }
      },
  }
</script>

<style lang="scss">
.search-box{
  position: sticky;
  top:0;
  z-index: 1;
}  
.history-title{
    border-bottom: 1px solid #d3d3d3;
    height: 40px;
    line-height: 40px;
    uni-icons{
      float: right;
    }
  }
.keyword-list{
  .keyword-content{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
    height: 30px;
    padding: 10px 5px;
    line-height: 30px;
    .con-item{
      width: 95%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;//省略号
    }
  }
}
.bb{
  display: flex;
  flex-wrap: wrap;
  .history-content{
    margin: 10px 5px;
  }
}
</style>
